Dentre as preocupações para a montagem da interface do sistema, estamos estabelecendo foco em questões como agilidade, acessibilidade e usabilidade. Desta forma, o projeto tem uma identidade visual padronizada e atrativa em todas as telas que são projetadas para funcionamento em desktops e dispositivos móveis.
No Fluxo a seguir, é mostrado passo a passo como é realizada a navegação e utilização das funcionalidades do site.
1- Usuário acessa nosso site.
2- Ao clicar no "ícone de usuário" na página inicial, o usuário é redirecionado para a página de login, onde deverá inserir seu e-mail e senha.
3- Se o usuário não possuir cadastro, deve clicar em "Cadastre-se" na página de login. Para finalizar o cadastro, é necessário ter mais de 16 anos.
4- Após concluir o login ou cadastro, o usuário é redirecionado para a página inicial. O ícone do usuário desaparece, sendo substituído pelo botão "Minha Conta" e "Sair", indicando que está logado no sistema.
5- Na página inicial, o usuário deve clicar no botão "Quiz da Pele" para responder o questionário. O questionário contém perguntas para identificar as necessidades de cuidados com a pele, bem como possíveis problemas de pele mais graves. Se as respostas indicarem um problema mais grave, o usuário recebe um aviso na tela para procurar ajuda médica. Se as respostas forem negativas, a rotina é gerada.
6- O usuário visualiza a tela com a rotina gerada, contendo cuidados para a parte da manhã e noite.
7- Se o usuário desejar visualizar novamente sua rotina, deve retornar à página inicial, clicar em "Minha Conta" e poderá visualizá-la ou excluí-la conforme desejar.
8- Além disso, o usuário pode acessar diversas dicas sobre skincare clicando nos vários cards de informações na página inicial.
figura 2- Fluxograma
Conforme fluxo de telas do projeto, apresentado no item anterior, as telas do sistema são apresentadas em detalhes nos itens que se seguem. As telas do sistema apresentam uma estrutura comum que é apresentada na Figura abaixo, na qual fora criado para o projeto anterior. O layout é composto pelo que se segue:
- Cabeçalho- Local onde são dispostos elementos fixos de identidade como o logo, e a navegação principal do site (menu da aplicação);
- Conteúdo- Apresentará, para cada tela, seu conteúdo personalizado;
- Rodapé - Contém informações sobre direitos autorais, newsletter e social media.
figura 3 - Estrutura padrão do site
A tela que se segue compõe as principais funções do site de forma demonstrativa e objetiva para o usuário. A tela contém os campos:
- Login - Permite que o usuário crie sua conta para acessar suas informações salvas e diretrizes do site.
- Criar Rotina - A partir da criação da conta do usuário, é disponibilizado o campo para geração de rotina para o seu tratamento individual.
- Tela de conteúdo informativo - Cards informativos com dicas e conteúdos explicativos sobre skincare.
figura 4 - Home page do site
A tela de Login, apresenta para o usuario os campos necessários para acessar a sua conta. Caso ainda não a tenha criada, é indicada a mensagem para criação de conta e direcionada para a tela de cadastro.
figura 5 - Tela Login
Conforme imagem apresentada após a tela de login, a tela de cadastro apresenta os campos:
figura 6 - Tela cadastro
- Email - É solicitado para o usuário que preencha o canpo com seu email.
- Nome de usuário - é indicado para o usuário que preencha o campo com seu nome social.
- Data de nascimento - é solicitado para o usuário sua data de nascimento, para que seja verificado se o mesmo possui mais de 16 anos. Conforme solicitado pelos termos de uso do site.
- Senha - é solicitada a criação de uma senha para acesso as suas informações armazenadas no site.
A tela questionário apresenta um quiz, no qual o usuário irá preencher com a as informações sobre sua saúde da pele, para que essas informações sejam salvas e gerada a rotina específica.
figura 7 - Tela questionário
Após a criação da conta e preenchimento do questionário, é exibida na tela a rotina personalizada para cada usuário de acordo com seu tipo de pele.
figura 8 - Tela Rotina gerada
Ao clicar no card de "O que são ativos?', o usuário será direcionado para a página de informações sobre os ativos e demais cuidados com a pele.
figura 9 - Informação ativos